<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/easel.js"></script>
  <script src="../lib/preload.js"></script>
  <script src="../lib/tween.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="car"></canvas>

  <script>
    class Game {
      constructor(id) {
        this.stage = new createjs.Stage(id);

        this.speed = 10;

        document.body.onresize = this.resizeCanvas.bind(this);
      }

      resizeCanvas() {
        this.stage.canvas.width = document.documentElement.clientWidth;
        this.stage.canvas.height = document.documentElement.clientHeight;
      }

      init(assets) {
        this.resizeCanvas();
        this.queue = new createjs.LoadQueue(false, '../assets/');
        this.queue.loadManifest(assets);
        this.queue.on('complete', () => {
          let bg = this.queue.getResult('bg');
          let car = this.queue.getResult('car');

          this.drawBg(bg);
          this.drawCar(car);
        })

        document.body.addEventListener('keydown', ev => {
          if(ev.keyCode == 32){
            this.speed = 20;

            createjs.Tween.get(this.carDrop)
              .to({
                y: this.carDrop.y - 100
              }, 200)
          }
        })
        document.body.addEventListener('keyup', ev => {
          if(ev.keyCode == 32){
            this.speed = 10;
            
            createjs.Tween.get(this.carDrop)
              .to({
                y: this.stage.canvas.height - 200
              }, 1000)
          }
        })
      }

      drawBg(bg) {
        let scale = this.stage.canvas.width / bg.width;
        this.backY = 0;
        this.backDrop = new createjs.Bitmap(bg);
        this.backDropClone = this.backDrop.clone();
        this.backDropClone.y = -bg.height;

        this.backContainer = new createjs.Container();
        this.backContainer.addChild(this.backDrop);
        this.backContainer.addChild(this.backDropClone);
        this.backContainer.setTransform(0, 0, scale, scale)

        this.stage.addChild(this.backContainer);

        createjs.Ticker.timingMode = createjs.Ticker.RAF;

        createjs.Ticker.addEventListener('tick', ev => {
          if (ev.paused !== 1) {

            this.backY += this.speed;

            if (this.backY >= bg.height * scale){
              this.backY = 0;
            }

            this.backContainer.y = this.backY;
          }

          this.stage.update();
        })
      }

      drawCar(car) {
        this.carDrop = new createjs.Bitmap(car);
        this.stage.addChild(this.carDrop);
        let scale = this.getScale(50, car.width)
        this.carDrop.setTransform(0, 0, scale, scale);

        this.carDrop.x = this.stage.canvas.width / 2 - car.width / 2 * scale;
        this.carDrop.y = this.stage.canvas.height - 200;
      }

      getScale(px, n){
        return px / n;
      }
    }

    let game = new Game('car');

    game.init([{
        src: 'test/car.png',
        id: 'car'
      },
      {
        src: 'test/background_1.jpg',
        id: 'bg'
      }
    ]);
  </script>
</body>

</html>